<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('pointsAcquisitionRecord.index.会员积分获取记录')" />
    <SearchCom
      :searchList="searchList"
      @search="toSearch"
      @reset="handleReset"
    />
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      height="calc(100% - 200px)"
      border
      v-loading="loading"
    >
      <el-table-column prop="vipNickName" :label="$t('pointsAcquisitionRecord.index.会员昵称')" />
      <el-table-column prop="vipPhone" :label="$t('pointsAcquisitionRecord.index.会员手机号')" />
      <el-table-column prop="point" :label="$t('pointsAcquisitionRecord.index.积分变动')">
        <template #default="scope">
          <span :class="scope.row.point > 0 ? 'color-67C23A' : 'color-ff1818'">
            {{ scope.row.point > 0 ? "+" : "-" }}{{ Math.abs(scope.row.point) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="readCount" :label="$t('pointsAcquisitionRecord.index.获取方式')">
        <template #default="scope">
          {{ typeList.find((item) => item.value === scope.row.type)?.label }}
        </template>
      </el-table-column>
      <el-table-column prop="createdTime" :label="$t('pointsAcquisitionRecord.index.变更时间')">
        <template #default="scope">
          {{ moment(scope.row.createdTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import Api from "@/config/api/api";
import SearchCom from "@/components/SearchCom.vue";
import { useTableMixin } from "@/utils/tableMixin";
import moment from "moment";
import { useI18n } from "vue-i18n";

const { t: $t } = useI18n();

const {
  currentPage,
  pageSize,
  total,
  tableData,
  loading,
  getDataList,
  handleSearch,
  handleReset,
  handleSizeChange,
  handleCurrentChange,
} = useTableMixin(Api.vipPointLogList);

const toSearch = (params) => {
  handleSearch(params);
};

const searchList = [
  {
    label: $t('pointsAcquisitionRecord.index.会员名称'),
    key: "vipNickName",
    type: "input",
  },
  {
    label: $t('pointsAcquisitionRecord.index.手机号'),
    key: "vipPhone",
    type: "input",
  },
];

// 业务类型 11 销售 12 销售撤销 13 退款 21 平台赠送
const typeList = computed(() => [
  {
    label: $t('pointsAcquisitionRecord.type.销售'),
    value: 11,
  },
  {
    label: $t('pointsAcquisitionRecord.type.销售撤销'),
    value: 12,
  },
  {
    label: $t('pointsAcquisitionRecord.type.退款'),
    value: 13,
  },
  {
    label: $t('pointsAcquisitionRecord.type.平台赠送'),
    value: 2,
  },
]);
</script>

<style lang="scss" scoped>
.toolbar {
  width: 100%;
  height: 42px;
  margin-bottom: 5px;
  background: rgba(24, 144 ,255, 0.1);
}
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.split {
  width: 1px;
  height: 12px;
  background: #ddd;
  margin: 0 5px;
}
</style>
